'use client';

import { useState } from 'react';
import { 
  Search, 
  Plus, 
  MessageSquare,
  Users,
  Star,
  ThumbsUp,
  Edit,
  Trash2
} from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import { FadeIn } from '@/components/ui/motion';

// 模拟数据
const mockStudents = [
  { id: 1, name: '张三', studentId: '20230001' },
  { id: 2, name: '李四', studentId: '20230002' },
  { id: 3, name: '王五', studentId: '20230003' },
  { id: 4, name: '赵六', studentId: '20230004' },
  { id: 5, name: '钱七', studentId: '20230005' },
];

const mockEvaluations = [
  {
    id: 1,
    studentId: '20230001',
    studentName: '张三',
    type: '表现优秀',
    content: '在课堂上积极发言，认真完成作业，是个好学生。',
    date: '2023-10-15'
  },
  {
    id: 2,
    studentId: '20230002',
    studentName: '李四',
    type: '进步明显',
    content: '这个月的学习态度有很大进步，继续加油！',
    date: '2023-10-14'
  },
  {
    id: 3,
    studentId: '20230003',
    studentName: '王五',
    type: '需要改进',
    content: '上课注意力不够集中，希望能够改进。',
    date: '2023-10-13'
  }
];

const evaluationTypes = ['表现优秀', '进步明显', '需要改进', '违纪警告'];

export default function EvaluationPage() {
  const [searchTerm, setSearchTerm] = useState('');
  const [dialogOpen, setDialogOpen] = useState(false);
  const [evaluations, setEvaluations] = useState(mockEvaluations);
  
  // 新评价表单状态
  const [newEvaluation, setNewEvaluation] = useState({
    studentId: '',
    type: '',
    content: ''
  });
  
  // 处理表单输入变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setNewEvaluation(prev => ({ ...prev, [name]: value }));
  };
  
  // 处理类型选择变化
  const handleTypeChange = (value: string) => {
    setNewEvaluation(prev => ({ ...prev, type: value }));
  };
  
  // 处理学生选择变化
  const handleStudentChange = (value: string) => {
    setNewEvaluation(prev => ({ ...prev, studentId: value }));
  };
  
  // 添加评价
  const handleAddEvaluation = () => {
    const student = mockStudents.find(s => s.studentId === newEvaluation.studentId);
    if (!student) return;
    
    const newEvaluationItem = {
      id: evaluations.length + 1,
      studentId: student.studentId,
      studentName: student.name,
      type: newEvaluation.type,
      content: newEvaluation.content,
      date: new Date().toISOString().split('T')[0]
    };
    
    setEvaluations([newEvaluationItem, ...evaluations]);
    setDialogOpen(false);
    setNewEvaluation({
      studentId: '',
      type: '',
      content: ''
    });
    
    // 实际项目中应该调用API保存数据
    console.log('添加评价', newEvaluationItem);
  };
  
  // 删除评价
  const handleDeleteEvaluation = (id: number) => {
    if (window.confirm('确定要删除这条评价吗？')) {
      setEvaluations(evaluations.filter(ev => ev.id !== id));
      // 实际项目中应该调用API删除数据
      console.log('删除评价', id);
    }
  };
  
  // 过滤评价列表
  const filteredEvaluations = evaluations.filter(evaluation => 
    evaluation.studentName.toLowerCase().includes(searchTerm.toLowerCase()) || 
    evaluation.studentId.includes(searchTerm) ||
    evaluation.content.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <FadeIn>
      <div className="container mx-auto py-6">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-2xl font-bold">评价管理</h1>
          <div className="flex space-x-2">
            <div className="relative">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
              <Input
                type="search"
                placeholder="搜索学生或评价内容..."
                className="pl-8 w-[200px] md:w-[250px]"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
              <DialogTrigger asChild>
                <Button className="flex items-center">
                  <Plus className="mr-2 h-4 w-4" />
                  添加评价
                </Button>
              </DialogTrigger>
              <DialogContent className="sm:max-w-[500px]">
                <DialogHeader>
                  <DialogTitle>添加评价</DialogTitle>
                  <DialogDescription>
                    为学生添加新的评价记录
                  </DialogDescription>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  <div className="grid gap-2">
                    <Label htmlFor="student">选择学生</Label>
                    <Select value={newEvaluation.studentId} onValueChange={handleStudentChange}>
                      <SelectTrigger>
                        <SelectValue placeholder="选择学生" />
                      </SelectTrigger>
                      <SelectContent>
                        {mockStudents.map(student => (
                          <SelectItem key={student.id} value={student.studentId}>
                            {student.name} ({student.studentId})
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="type">评价类型</Label>
                    <Select value={newEvaluation.type} onValueChange={handleTypeChange}>
                      <SelectTrigger>
                        <SelectValue placeholder="选择评价类型" />
                      </SelectTrigger>
                      <SelectContent>
                        {evaluationTypes.map(type => (
                          <SelectItem key={type} value={type}>
                            {type}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="content">评价内容</Label>
                    <Textarea 
                      id="content" 
                      name="content"
                      placeholder="请输入评价内容..." 
                      className="min-h-[100px]"
                      value={newEvaluation.content}
                      onChange={handleInputChange}
                    />
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
                  <Button onClick={handleAddEvaluation}>添加</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        </div>
        
        {/* 评价统计卡片 */}
        <div className="mb-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center">
                <MessageSquare className="h-5 w-5 mr-2" />
                评价统计概览
              </CardTitle>
              <CardDescription>
                班级学生评价情况统计
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-blue-50 p-4 rounded-lg">
                  <div className="flex justify-between items-center">
                    <div>
                      <p className="text-sm text-gray-500">评价总数</p>
                      <p className="text-2xl font-bold text-blue-600">{evaluations.length}</p>
                    </div>
                    <div className="p-2 bg-blue-100 rounded-full">
                      <MessageSquare className="h-6 w-6 text-blue-600" />
                    </div>
                  </div>
                </div>
                
                <div className="bg-green-50 p-4 rounded-lg">
                  <div className="flex justify-between items-center">
                    <div>
                      <p className="text-sm text-gray-500">学生总数</p>
                      <p className="text-2xl font-bold text-green-600">{mockStudents.length}</p>
                    </div>
                    <div className="p-2 bg-green-100 rounded-full">
                      <Users className="h-6 w-6 text-green-600" />
                    </div>
                  </div>
                </div>
                
                <div className="bg-yellow-50 p-4 rounded-lg">
                  <div className="flex justify-between items-center">
                    <div>
                      <p className="text-sm text-gray-500">本月评价</p>
                      <p className="text-2xl font-bold text-yellow-600">{evaluations.length}</p>
                    </div>
                    <div className="p-2 bg-yellow-100 rounded-full">
                      <Star className="h-6 w-6 text-yellow-600" />
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
        
        {/* 评价列表 */}
        <div className="space-y-4">
          {filteredEvaluations.length > 0 ? (
            filteredEvaluations.map((evaluation) => (
              <Card key={evaluation.id}>
                <CardHeader className="pb-2">
                  <div className="flex justify-between items-start">
                    <div>
                      <div className="flex items-center space-x-2">
                        <CardTitle className="text-lg">{evaluation.studentName}</CardTitle>
                        <Badge className={`${
                          evaluation.type === '表现优秀' ? 'bg-green-100 text-green-800' :
                          evaluation.type === '进步明显' ? 'bg-blue-100 text-blue-800' :
                          evaluation.type === '需要改进' ? 'bg-yellow-100 text-yellow-800' :
                          'bg-red-100 text-red-800'
                        }`}>
                          {evaluation.type}
                        </Badge>
                      </div>
                      <CardDescription>
                        学号: {evaluation.studentId} · 评价日期: {evaluation.date}
                      </CardDescription>
                    </div>
                    <div className="flex space-x-2">
                      <Button variant="outline" size="sm" className="h-8">
                        <Edit className="h-4 w-4 mr-1" />
                        <span>编辑</span>
                      </Button>
                      <Button 
                        variant="outline" 
                        size="sm" 
                        className="h-8 text-red-600 hover:text-red-700"
                        onClick={() => handleDeleteEvaluation(evaluation.id)}
                      >
                        <Trash2 className="h-4 w-4 mr-1" />
                        <span>删除</span>
                      </Button>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-700">{evaluation.content}</p>
                </CardContent>
              </Card>
            ))
          ) : (
            <div className="text-center py-8">
              <p className="text-gray-500">暂无评价记录</p>
            </div>
          )}
        </div>
      </div>
    </FadeIn>
  );
}
